<template>
  <div class='cardlist'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <svg-icon icon-class="nested" style='color:#3890df'></svg-icon>
        <span>数据任务</span>
      </div>
      <div class="card-item">
        <div class='card-content'>
          <div class='cont'>
            <span style='color:#3890df'>{{dataTask.num1}}</span>/<span>{{dataTask.num2}}</span>
          </div>
          <p>今日已执行</p>
        </div>
        <p class='footer'>截止{{dataTask.time}}</p>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <svg-icon icon-class="example" style='color:#6554c0'></svg-icon>
        <span>数据服务</span>
      </div>
      <div class="card-item">
        <div class='card-content'>
          <div class='cont'>
            <span style='color:#6554c0'>{{dataServer.num1}}</span>/<span>{{dataServer.num2}}</span>
          </div>
          <p>访问成功率</p>
        </div>
        <p class='footer'>截止{{dataServer.time}}</p>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <svg-icon icon-class="excel" style='color:#1bb393'></svg-icon>
        <span>数据治理</span>
      </div>
      <div class="card-item">
        <div class='card-content'>
          <ul>
            <li v-for='(item,index) in dataGovernance.list' :key='index'>
              <label>{{item.name}}</label>
              <span style='color:#1bb393'>{{item.value}}</span>
            </li>
          </ul>
        </div>
        <p class='footer'>截止{{dataGovernance.time}}</p>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <svg-icon icon-class="component" style='color:#fe7c60'></svg-icon>
        <span>数据组件</span>
      </div>
      <div class="card-item">
        <div class='card-content'>
          <div class='cont'>
            <span style='color:#fe7c60'>{{dataComponent.num1}}</span>/<span>{{dataComponent.num2}}</span>
          </div>
          <p>今日已执行</p>
        </div>
        <p class='footer'>截止{{dataComponent.time}}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataTask: {
          time: '2018-7-18 18:00:00',
          num1: '14',
          num2: '17'
        },
        dataServer: {
          time: '2018-7-18 18:00:00',
          num1: '2,888K',
          num2: '3,000K'
        },
        dataGovernance: {
          time: '2018-7-18 18:00:00',
          list: [
            {
              name: '主数据总量',
              value: '66666'
            },
            {
              name: '元数据总量',
              value: '6666'
            },
            {
              name: '数据治理规则',
              value: '666'
            }
          ]
        },
        dataComponent: {
          time: '2018-7-18 18:00:00',
          num1: '688',
          num2: '716'
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .cardlist {
    height: 200px;
    margin-left: -20px;
    .el-card {
      width: calc(25% - 20px);
      margin-left: 20px;
      float: left;
      font-size: 14px;
      cursor: pointer;
      &:hover {
      	border-color: #009ce3;
      }
      .card-item {
        text-align: center;
        height: 105px;
        position: relative;
        .footer {
          color: #666;
          font-size: 12px;
          text-align: center;
          width: 100%;
          position: absolute;
          bottom: 0;
        }
        .card-content {
          p {
            color: #666;
            font-size: 14px;
          }
          .cont {
            font-weight: 500;
            line-height: 40px;
            font-size: 20px;
          }
          &>ul>li {
            list-style: none;
            line-height: 25px;
            label {
              width: 85px;
              display: inline-block;
              font-size: 14px;
              font-weight: 400;
              text-align: right;
              margin-right: 10px;
            }
            span {
              display: inline-block;
              text-align: left;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 80px;
            }
          }
        }
      }
    }
  }
</style>